<template>
  <div class="md:mx-5">
    <BasicForm
      submitOnReset
      v-bind="getFormProps"
      v-if="getBindValues.useSearchForm"
      :tableAction="tableAction"
      @register="registerForm"
      @submit="handleSearchInfoChange"
    >
    </BasicForm>

    <Table class="main-table" :bordered="true" v-bind="getBindValues" @change="handleChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <div class="md:flex">
            <span v-for="action in actionColumn" v-bind:key="action">
              <Divider type="vertical"></Divider>
              <Button
                v-show="action.ifShow"
                v-bind="action.props"
                style="border-radius: 3px"
                size="small"
                :disabled="action.props.disabled === undefined ? false : action.props.disabled(record)"
                @click="action.click(record)"
                >{{ action.name }}
              </Button>
            </span>
            <Divider type="vertical"></Divider>
          </div>
        </template>
      </template>
    </Table>
  </div>
</template>

<script setup lang="ts">
/* eslint-disable  @typescript-eslint/no-unused-vars */
import { computed, ref, toRaw, unref, useSlots } from 'vue';
import { Table, Divider } from 'ant-design-vue';
import { basicProps } from '/@/components/BasicTable/type/props';
import { useDataSource } from '/@/components/BasicTable/hooks/useDataSource';
import { usePagination } from '/@/components/BasicTable/hooks/usePagination';
import { isFunction } from '/@/utils/is';
import { Button } from 'ant-design-vue';
import { useBasicForm } from '/@/components/BasicForm/hooks/useBasicForm';
import BasicForm from '/@/components/BasicForm/BasicForm.vue';
import { useTableForm } from '/@/components/BasicTable/hooks/useTableForm';
import { useLoading } from '/@/components/BasicTable/hooks/useLoading';
import { TableActionType } from '/@/components/BasicTable/type/TableActionType';
import { BasicTableProps } from '/@/components/BasicTable/type/BasicTableProps';

const props = defineProps(basicProps);
const emit = defineEmits(['register', 'fetch-success', 'fetch-error', 'change']);

const slots = useSlots();

const paramsProps = ref<Partial<BasicTableProps>>();

const [registerForm, formActions] = useBasicForm();

const actionColumn = ref([]);
const schema = ref([]);
const getProps = computed(() => {
  return { ...props, ...unref(paramsProps) } as BasicTableProps;
});

const { getPagination, setPagination, pagination } = usePagination(getProps);

const { fetch, handleTableChange, reload, setTableData, getDataSource, getDataSourceRef } = useDataSource(
  getProps,
  pagination,
  setPagination,
  { getFieldsValue: formActions.getFieldsValue },
  emit
);
const { getLoading, setLoading } = useLoading(getProps);

const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } = useTableForm(
  getProps,
  slots,
  fetch,
  getLoading
);

function setProps(props: Partial<BasicTableProps>) {
  actionColumn.value = props.actionColumns;
  if (props.useSearchForm) {
    schema.value = props.formConfig.schema;
  }
  paramsProps.value = { ...unref(paramsProps), ...props };
}

function handleChange(...args: any[]) {
  handleTableChange(args[0]);
  emit('change', ...args);
  const { onChange } = unref(getProps);
  onChange && isFunction(onChange) && onChange(undefined, ...args);
}

const getBindValues = computed(() => {
  const dataSource = unref(getDataSourceRef);

  let bindData: any = {
    ...unref(getProps),
    dataSource: dataSource,
    pagination: toRaw(unref(pagination)),
  };
  return bindData;
});
const tableAction: TableActionType = {
  setProps,
  reload,
  setTableData,
  getDataSource,
};
defineExpose(['tableAction']);
emit('register', tableAction, formActions);
</script>

<style lang="less" scoped>
/* 表格斑马样式 **/
/deep/ .ant-table-tbody tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/deep/ .ant-table-thead > tr > th {
  text-align: center;
  background-color: #f5f5f5;
  color: #959595;
  font-weight: bold;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

/deep/ .ant-table-tbody > tr > td {
  padding: 10px;
}

/deep/ .ant-table-thead > tr > th {
  padding: 25px;
}
</style>
